<template>
	<view class="base-cloud" style="display: inline-block;">
		<view class="father" v-if="showVersion" @tap.stop="toUpdate">
			版本{{ version }}
			<view class="abs top right" v-if="updateData.ver" style="top: -6rpx;right: -14rpx;"><view class="w7 h7 rds redBg"></view></view>
		</view>

		<view class="fixed z20 wp8 flex ct plr50 pb50 " v-if="show">
			<view class="w100p showIn" :animation="inData" style="width:608rpx;max-width: 828rpx;">
				<view class="gradualBg rds12" :style="{ 'background-color': color }">
					<view class="father">
						<view class="h120  father hidden " style="top: 50rpx;">
							<view class="abs top left50p">
								<image src="./static/cloudRight.png" mode="widthFix" class="w500 h120  animated goAway infinite" style="height: 540rpx;"></image>
							</view>
							<view class="abs top right50p">
								<image src="./static/cloudLeft.png" mode="widthFix" class="w500 h120  animated goAwayLeft infinite" style="height: 540rpx;"></image>
							</view>
							<image class="abs top30 left30 w10 h10 animated infinite fadeOut slow" src="./static/star.png" mode="widthFix" style="height:40rpx"></image>
							<image
								class="abs top60 left80 w10 h10  animated infinite fadeOut slowest delay-1s"
								src="./static/star.png"
								mode="widthFix"
								style="height:40rpx"
							></image>
							<image
								class="abs top20 right20 w10 h10  animated infinite fadeOut slower delay-2s"
								src="./static/star.png"
								mode="widthFix"
								style="height:40rpx"
							></image>
							<image
								class="abs top20 right50 w30 h30 animated fadeOutRight infinite slowest"
								src="./static/smallCloud.png"
								mode="widthFix"
								style="height:16rpx"
							></image>
							<image
								class="abs top30 left50 w30 h30 animated fadeOutRight infinite slow8 "
								src="./static/smallCloud.png"
								mode="widthFix"
								style="height:16rpx"
							></image>
						</view>
						<view class="abs bottom animated bounceUp infinite" style="top: -70rpx;">
							<view class="animated goUp delay-06s" style="height: 160rpx;">
								<image src="./static/airship.png" mode="" class=" center-block father z3" style="width: 160rpx;height: 160rpx;"></image>
								<view class="father" style="top: -70rpx;">
									<image src="./static/shipAir.png" mode="widthFix" class="w40 h85 center-block  animated infinite splashOut"></image>
									<view class="abs">
										<image
											src="./static/shipAir.png"
											mode="widthFix"
											class="w40 h85 center-block animated infinite splashOut delay-03s"
											style="height: 172rpx;"
										></image>
									</view>
									<view class="abs">
										<image src="./static/shipAir.png" mode="widthFix" class="w40 h85 center-block animated infinite splashOut delay-06s"></image>
									</view>
									<view class="abs bottom" style="bottom: -80upx;">
										<image src="./static/shipGas.png" mode="widthFix" class="w40 h85 center-block animated infinite splash"></image>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class=" whiteBg hidden plr20 father z3 rdsBr12 rdsBl12" :class="{ pb100: progress <= 0 || progress >= 100 || completed }">
						<view class="ptb10 fz16 bold">
							<block v-if="progress == 0">{{ title }} （v.{{ version }}）</block>
							<block v-else-if="progress <= 100 && !completed">
								<view>
									<view class="fz30 normal avanti pt15 text-center">
										{{ progress.toFixed(2) }}
										<text class="fz12 ml2">%</text>
									</view>
									<view class="text-center pb40 op8 gray fz14 normal">版本更新中，不要离开...</view>
								</view>
							</block>
							<view class="text-center pt15" v-else-if="completed">
								版本升级成功
								<view class="pb40 op8 gray fz14 normal pt5">更新已完成，请重启应用体验新版</view>
							</view>
						</view>
						<scroll-view scroll-y="true" class="h60 autoY pb20" v-if="progress == 0">
							<text v-html="updateData.content ? updateData.content : defaultContent"></text>
						</scroll-view>
						<view class="pd50 pt25" v-else-if="progress < 100">
							<view class="grayBg bd rds23">
								<view class="grayBg rds23"><view class="ptb3 rds23" :style="{ width: progress + '%', height: '10rpx', 'background-color': color }"></view></view>
							</view>
						</view>
						<view class="father">
							<view class="abs top left50p  roundBox rds text-center" :style="{ 'background-color': color }">
								<view class="pt30" v-if="!completed">
									<button hover-class="op9" @tap.stop="download" class="btn bd2 whiteBg line rds23 inline plr50 ptb10 fz16" style="line-height: inherit;">
										立即升级
									</button>
								</view>
								<view class="pt30" v-else>
									<button hover-class="op8" @tap.stop="restart" class="btn bd2 whiteBg line rds23 inline plr50 ptb10 fz16" style="line-height: inherit;">
										立即安装
									</button>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="op9 father" v-if="progress == 0">
					<view class="abs">
						<view class="flex ct "><view class="h30 bl3 whiteBd"></view></view>
						<u-icon class="flex  ct" name="close-circle" color="#ffffff" size="70" @click="hide" style="top: -12upx;"></u-icon>
						<!-- <view class="flex  ct bIcon-close fz35 white father" @tap.stop="hide" style="top: -12upx;"></view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'version-update',
	props: {
		title: {
			default: '发现新版本'
		},
		defaultContent: {
			default: '快来升级，体验最新的功能吧！'
		},
		showVersion: {
			default: true
		},
		autoShow: {
			default: false
		},
		isCache: {
			default: true
		},
		updateUrl: {
			default: 'api/base-app-version'
		},
		color: {
			default: '#4F5BE1'
		}
	},
	data() {
		return {
			show: false,
			version: '1.0.0',
			version2: '',
			updateData: {},
			progress: 0,
			completed: false,
			inData: null
		};
	},
	created() {
		this.checkVersion();
	},
	methods: {
		checkVersion: function(e) {
			// #ifdef APP-PLUS
			plus.runtime.getProperty(plus.runtime.appid, widgetInfo => {
				this.version2 = widgetInfo.version;
				this.queryVersion();
			});
			// #endif
			// #ifdef H5
			this.queryVersion();
			// #endif
		},

		queryVersion: function(e) {
			uni.request({
				url: 'http://zsxt.letuilm.com/api/tool/appVersion',
				data: {
					// version: widgetInfo.version, //版本号
					// name: widgetInfo.name //应用名称
				},
				success: result => {
					console.log('result', result);
					this.updateData = result.data;
					uni.setStorage({
						key: 'version',
						data: JSON.stringify(result.data)
					});
					this.version = result.data.ver;
					this.toUpdate();
				}
			});
		},

		toUpdate: function(e) {
			if (this.updateData.ver == this.version2) {
				uni.showToast({
					title: '已是最新版本',
					icon: 'none'
				});
				return;
			}
			this.show = true;
		},

		download: function(e) {
			// #ifdef H5
			//测试使用
			// #endif
			// var timer = setInterval(e => {
			// 	this.progress += 3.5;
			// 	if (this.progress >= 100) {
			// 		clearInterval(timer);
			// 		this.completed = true;
			// 	}
			// }, 100);
			// return;

			const task = uni.downloadFile({
				url: this.updateData.url,
				success: downloadResult => {
					// uni.hideLoading();
					if (downloadResult.statusCode === 200) {
						// #ifdef APP-PLUS
						// 		plus.runtime.install(plus.io.convertLocalFileSystemURL(downloadResult.tempFilePath), {}, {}, function(error) {
						// 			uni.showToast({
						// 				title: '安装失败',
						// 				duration: 1500
						// 			});
						// 		});
						// plus.runtime.install(downloadResult.tempFilePath);  安装apk
						plus.runtime.install(
							downloadResult.tempFilePath,
							{ force: false },
							e => {
								this.downloadSuccess(e);
							},
							err => {
								this.downloadError(err);
							}
						);
						// #endif
						// #ifdef H5
						this.downloadSuccess();
						// #endif
						return;
					}
					this.downloadError(e);
				},
				fail: err => {
					this.downloadError(err);
				}
			});

			task.onProgressUpdate(e => {
				// console.log('下载进度',e.progress)
				this.progress = e.progress;
			});
		},

		downloadError: function(e) {
			console.log('下载失败……');
			this.show = false;
			this.progress = 0;
			uni.showModal({
				title: '提示',
				content: '更新失败，请稍后再试',
				showCancel: false,
				confirmColor: '#414cd9'
			});
		},

		downloadSuccess: function(e) {
			this.completed = true;
		},

		restart: function(e) {
			this.show = false;
			this.completed = false;
			this.progress = 0;
			// #ifdef APP-PLUS
			plus.runtime.restart();
			// #endif
		},

		hide: function(e) {
			var animation = uni.createAnimation({
				duration: 300,
				timingFunction: 'ease'
			});
			animation
				.scale(0)
				.opacity(0)
				.step();
			this.inData = animation.export();
			setTimeout(e => {
				this.show = false;
				this.inData = null;
				this.completed = false;
				this.progress = 0;
			}, 420);
		}
	}
};
</script>

<style>
.roundBox {
	width: 5000upx;
	height: 5000upx;
	margin-left: -2500upx;
}
.animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-timing-function: linear;
}

.animated.infinite {
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

@keyframes goUp {
	from {
		-webkit-transform: translate3d(0, 70%, 0);
		transform: translate3d(0, 70%, 0);
	}

	to {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

.goUp {
	-webkit-animation-name: goUp;
	animation-name: goUp;
	-webkit-animation-duration: 600ms;
	animation-duration: 600ms;
	animation-timing-function: ease-in;
}

@keyframes splash {
	0,
	100% {
		transform: scaleX(0.9);
	}
	5%,
	95% {
		transform: scaleX(1.02);
	}
	10%,
	80% {
		transform: scaleX(1.05);
	}
	25%,
	75% {
		transform: scaleX(1.08);
	}
	50% {
		transform: scaleX(1.1);
	}
}

.splash {
	-webkit-animation-name: splash;
	animation-name: splash;
	-webkit-animation-duration: 0.6s;
	animation-duration: 0.6s;
	animation-timing-function: linear;
}

@-webkit-keyframes splashOut {
	from {
		opacity: 1;
		transform: scaleX(0);
	}

	to {
		opacity: 0;
		transform: scaleX(2);
	}
}

.splashOut {
	-webkit-animation-name: splashOut;
	animation-name: splashOut;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
}

@keyframes bounceUp {
	0% {
		transform: translate3d(0, 0, 0);
	}
	50% {
		transform: translate3d(0, -30rpx, 0);
	}
}

.bounceUp {
	-webkit-animation-name: bounceUp;
	animation-name: bounceUp;
	-webkit-animation-duration: 1.6s;
	animation-duration: 1.6s;
	animation-timing-function: linear;
}

@keyframes fadeOut {
	0,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}
}

.fadeOut {
	-webkit-animation-name: fadeOut;
	animation-name: fadeOut;
}

@keyframes fadeOutRight {
	0% {
		opacity: 0;
		transform: translate3d(-200%, 0, 0);
	}
	50% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}

	100% {
		opacity: 0;
		transform: translate3d(200%, 0, 0);
	}
}

.fadeOutRight {
	-webkit-animation-name: fadeOutRight;
	animation-name: fadeOutRight;
}

.animated.delay-03s {
	-webkit-animation-delay: 0.3s;
	animation-delay: 0.3s;
}

.animated.delay-06s {
	-webkit-animation-delay: 0.6s;
	animation-delay: 0.6s;
}

.animated.delay-1s {
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}

.animated.delay-2s {
	-webkit-animation-delay: 2s;
	animation-delay: 2s;
}

.animated.delay-3s {
	-webkit-animation-delay: 3s;
	animation-delay: 3s;
}

.animated.fast {
	-webkit-animation-duration: 800ms;
	animation-duration: 800ms;
}

.animated.faster {
	-webkit-animation-duration: 500ms;
	animation-duration: 500ms;
}

.animated.fastest {
	-webkit-animation-duration: 200ms;
	animation-duration: 200ms;
}

.animated.slow {
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
}

.animated.slower {
	-webkit-animation-duration: 3s;
	animation-duration: 3s;
}

.animated.slowest {
	-webkit-animation-duration: 10s;
	animation-duration: 10s;
}

.animated.slow4 {
	-webkit-animation-duration: 5s;
	animation-duration: 5s;
}

.animated.slow5 {
	-webkit-animation-duration: 5s;
	animation-duration: 5s;
}

.animated.slow8 {
	-webkit-animation-duration: 8s;
	animation-duration: 8s;
}
.goAway {
	transform: translate3d(-50%, 10%, 0);
	-webkit-animation-name: goAway;
	animation-name: goAway;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
}

@keyframes goAway {
	from {
		transform: translate3d(-50%, 10%, 0);
	}
	to {
		transform: translate3d(-1.3%, -17.6%, 0);
	}
}

.goAwayLeft {
	transform: translate3d(50%, 10%, 0);
	-webkit-animation-name: goAwayLeft;
	animation-name: goAwayLeft;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
}

@keyframes goAwayLeft {
	from {
		transform: translate3d(50%, 10%, 0);
	}
	to {
		transform: translate3d(2%, -17%, 0);
	}
}
@keyframes showIn {
	0% {
		opacity: 0;
		transform: scale3d(0.5, 0.5, 0.5);
	}

	100% {
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}
}

.showIn {
	animation-duration: 0.4s;
	animation-name: showIn;
}

/* ----------------------------------------------------------------------------------- */
.bd {
	border: 2rpx solid #80808021;
}
.ptb3 {
	padding-top: 6rpx !important;
	padding-bottom: 6rpx !important;
}
.grayBg {
	background-color: #ffffff;
	color: #000000;
}
.h120 {
	height: 270rpx;
}
.pt25 {
	padding-top: 25 !important;
}
.rds12,
.radius12 {
	-webkit-border-radius: 26rpx !important;
	-moz-border-radius: 26rpx !important;
	border-radius: 26rpx !important;
}
.gradualBg {
	background-image: linear-gradient(to top right, #424dda, #525fe2);
	color: #fff;
}

.father {
	position: relative;
}
.h120 {
	height: 264rpx;
}
.hidden {
	overflow: hidden;
}
.left50p {
	right: auto;
	left: 50%;
}
.abs,
.fixed {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}
.z3 {
	z-index: 3 !important;
}
.pt30 {
	padding-top: 66rpx !important;
}

.w500 {
	width: 900rpx;
}
.h120 {
	height: 264rpx;
}
uni-image {
	will-change: transform;
}
div,
body,
a,
img,
span,
uni-page-body,
uni-view,
uni-navigator,
uni-image,
uni-text,
uni-input,
uni-textarea,
uni-button,
uni-form {
	box-sizing: border-box;
}
/* uni-image>div, uni-image>img {
    width: 100%;
    height: 100%;
} */
.right50p {
	left: auto;
	right: 50%;
}
.abs.top,
.fixed.top {
	bottom: auto;
}
.left30 {
	right: auto;
	left: 66rpx;
}
.top30 {
	bottom: auto;
	top: 66rpx;
}

.h10 {
	height: 22rpx;
}
.w10 {
	width: 22rpx;
}
.left80 {
	right: auto;
	left: 176rpx;
}
.top60 {
	bottom: auto;
	top: 132rpx;
}
.right20 {
	left: auto;
	right: 44rpx;
}
.top20 {
	bottom: auto;
	top: 44rpx;
}
.right50 {
	left: auto;
	right: 110rpx;
}
.left50 {
	right: auto;
	left: 110rpx;
}
.top30 {
	bottom: auto;
	top: 66rpx;
}
.h30 {
	height: 66rpx;
}
.w30 {
	width: 66rpx;
}
.center-block {
	margin: 0 auto;
	display: block;
}
.w80 {
	width: 176rpx;
}
.h75 {
	height: 164rpx;
}
.w40 {
	width: 88rpx;
}
.rdsBr12,
.radiusBottomRight12 {
	border-bottom-right-radius: 26rpx !important;
}
.rdsBl12,
.radiusBottomLeft12 {
	border-bottom-left-radius: 26rpx !important;
}
.pb100 {
	padding-bottom: 220rpx !important;
}
.plr20 {
	padding-left: 44rpx !important;
	padding-right: 44rpx !important;
}
.whiteBg {
	background-color: #fff;
	color: #000;
}
.fz16 {
	font-size: 34rpx !important;
}
.ptb10 {
	padding-top: 22rpx !important;
	padding-bottom: 22rpx !important;
}
.text-bold,
.bold {
	font-weight: 700 !important;
}
.autoY {
	overflow-y: auto;
}
.pb20 {
	padding-bottom: 44rpx !important;
}
.h60 {
	height: 132rpx;
}
.roundBox {
	width: 5520rpx;
	height: 5520rpx;
	margin-left: -2760rpx;
}
.abs.top,
.fixed.top {
	bottom: auto;
}
.text-center,
.tc {
	text-align: center !important;
}
.radius,
.rds {
	-webkit-border-radius: 100% !important;
	-moz-border-radius: 100% !important;
	border-radius: 100% !important;
}
.left50p {
	right: auto;
	left: 50%;
}

.op9 {
	opacity: 0.9 !important;
}
.flex.ct {
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
}
.flex {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.whiteBd {
	border-color: #fff;
}
.bl3 {
	border-left: 6rpx solid #f1f1f1;
}
.fz35 {
	font-size: 76rpx !important;
}
.white {
	color: #fff;
}
.right50p {
	left: auto;
	right: 50%;
}
.wp8 {
	background-color: rgba(0, 0, 0, 0.8);
}
.z20 {
	z-index: 20 !important;
}
.fixed {
	position: fixed;
}
.plr50 {
	padding-left: 110rpx !important;
	padding-right: 110rpx !important;
}
.pb50 {
	padding-bottom: 110rpx !important;
}
.btn,
.roundBtn {
	cursor: pointer;
	display: inline-block;
	text-align: center;
	padding: 8rpx 26rpx;
	background-color: #414cd9;
	color: #fff;
	font-size: 30rpx;
	border: 2rpx solid #414cd9;
	-webkit-border-radius: 8rpx;
	-moz-border-radius: 8rpx;
	border-radius: 8rpx;
	-webkit-transition: 0.4s;
	transition: 0.4s;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.btn.line,
.roundBtn.line {
	background-color: initial;
	background-image: none;
	color: #414cd9;
}
.btn.line.whiteBg,
.roundBtn.line.whiteBg {
	border-color: hsla(0, 0%, 100%, 0.7);
	color: #fff;
}
.inline {
	display: inline-block;
}
.rds23,
.radius23 {
	-webkit-border-radius: 50rpx !important;
	-moz-border-radius: 50rpx !important;
	border-radius: 50rpx !important;
}
.bd2 {
	border: 4rpx solid #f1f1f1;
}
.pd50 {
	padding: 100rpx !important;
}
/* ------------------------------------------------------------------------- */
</style>
